<template>
  <div class="addchufang">
    <div class="clearfix">
      <el-button
        type="danger"
        class="flowR"
        @click="delthis($event)"
        icon="el-icon-delete"
        circle
      ></el-button>
      <div width="30%" class="flowL chufangInput">
        <label style="display: inline-block">药品id：</label
        ><el-input
          v-model="id"
          width="100px"
          @blur="get()"
          class="everoneid"
          placeholder="请输入药品id"
        ></el-input>
      </div>
      <div width="30%" class="flowL chufangInput">
        <label>药品剂量：</label
        ><el-input
          @blur="countthis()"
          v-model="shuliang"
          :disabled="isget"
          class="everoneneed"
          placeholder="所需剂量"
        ></el-input>
      </div>
    </div>
    <br />
    <div class="clearfix">
      <div class="flowL chufangInput">
        药品名称：<span class="everonename">{{ data.mediName }}</span>
      </div>
      <div class="flowL chufangInput">|</div>
      <div class="flowL chufangInput">
        价格：<span class="danjia">{{ data.unitPrice }}</span
        >元/ <span class="danwei">{{ data.unit }}</span>
      </div>
      <div class="flowR chufangInput">
        当前药物合计：<span class="everonecount">{{ count }}</span
        >元
      </div>
    </div>
    <br />
    <hr />
  </div>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      id: null,
      shuliang: null,
      data: {
        isC: "",
        mediName: "",
        mediNo: "",
        quality: "",
        specification: "",
        storeLimit: "",
        unit: "",
        unitPrice: ""
      },
      isget: true,
      count: "0.00"
    };
  },
  watch: {
    id() {
      this.isget = true;
      this.count=0;
      this.shuliang=0;
    }
  },
  methods: {
    ...mapActions(["tongyong"]),
    get() {
      if (this.id != null && this.id != "") {
        // 请求
        this["tongyong"]({
          name: "GET_YAOWU",
          data: {
            id: this.id
          }
        }).then(res => {
          if (res.data.data) {
                  this.isget = false;
            this.data = res.data.data;
            console.log(res);
          } else {
            this.$message({
              message: "药物未找到",
              type: "warning"
            });
          }
        });
  
        // this.data = {
        //   id: "001",
        //   name: "白芍",
        //   danjia: "10.50",
        //   danwei: "斤",
        // }
      } else {
        (this.data = {
          isC: "",
          mediName: "",
          mediNo: "",
          quality: "",
          specification: "",
          storeLimit: "",
          unit: "",
          unitPrice: ""
        }),
          this.$message({
            message: "请先输入药品id，再输入剂量",
            type: "warning"
          });
      }
    },
    delthis(that) {
      let chufangthis = that.currentTarget.parentNode.parentNode.parentNode;
      chufangthis.parentNode.removeChild(chufangthis);
    },
    countthis() {
      if (!isNaN(this.shuliang) && this.shuliang > 0) {
        this.count = (this.shuliang * this.data.unitPrice).toFixed(2);
      } else {
        this.shuliang = 0;
        this.$message({
          message: "请检查你输入剂量，不可以小于0，不可以为数字以外的值",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style scoped>
.chufangInput {
  margin: 0 10px;
}
.addchufang {
  /* width: 100%; */
  padding: 5px;
  min-height: 60px;
  background: #f9f9f9;
}
</style>
